<template>
<div>
     <city-header></city-header>
  <city-search  :cities="cities"></city-search>
  <city-list
    :cities="cities"
    :hot="hotCities"
    :letter="letter"
  ></city-list>
  <city-zimu :cities="cities"
             @changehandle="handleLetter"
  >

  </city-zimu>

</div>


</template>

<script>
  import  CityHeader from  './components/Header'
  import  CitySearch from  './components/Search'
  import  CityList from  './components/List'
  import  CityZimu from  './components/Zimu'
  import axios from 'axios'
  export default {
    name:"City",
    components:{
      CityHeader,
      CitySearch,
      CityList,
      CityZimu
    },
    data () {
      return {
        cities: {},
        hotCities: [],
        letter: ''
      }
    },
    methods:{
      initInfo(){
        axios.get('api/city.json').then(res=>{
            res=res.data
            if (res.ret&&res.data) {
             const data=res.data
              this.cities = data.cities
              this.hotCities = data.hotCities

            }
        })
      },
      handleLetter(letter){
        this.letter=letter
      }
    },
    mounted() {
      this.initInfo()
    }
  }


</script>

<style lang="stylus" scoped>



</style>
